<template>
  <div class="container-index">
    <!-- @click="clickHandle('test click', $event)" -->
    <div class="container-box">
      <div class="index-header">
        <div class="index-header-txt">
          黄小历
        </div>
        <div class="index-header-date">
          <div class="date-h-year">{{dateInfo.year}}</div>
          <span>农历</span> <span class="date-h-day">{{dateInfo.chinaDay}}</span>
        </div>
        <div class="index-header-txt">
          黄小历
        </div>
      </div>
      <div class="index-content">
        <div class="index-content-txt">
          <i class="top-star"></i>
          {{dateInfo.chinaYear}}年
          <i class="icon-sx"></i>
          <i class="bottom-star"></i>
        </div>
        <div class="index-content-date">
          {{dateInfo.day}}
        </div>
        <div class="index-content-txt">
          <i class="top-star"></i>
          {{dateInfo.monthGz}}月{{dateInfo.dayGz}}日
          <i class="bottom-star"></i>
        </div>
        <div class="index-content-footer">
          <div class="index-content-sebtember">
            <div class="friday-title">{{dateInfo.monthEn}}</div>
            <div class="friday-cont">{{dateInfo.month}}月{{dateInfo.monthSize}}</div>
          </div>
          <div class="index-content-friday">
            <div class="friday-title">{{dateInfo.zhouJiEn}}</div>
            <div class="friday-cont">星期{{dateInfo.week}}</div>
          </div>
        </div>
      </div>
      <div class="go-edit-cont">
          <div @click="goYi" class="go-edit-yi edited" v-if="yiText == ''">
              输入一切好的，例如:吾皇要吃辣条
          </div>
          <div @click="goYi" class="go-edit-yi" v-else>
              {{yiText}}
          </div>
          <div @click="goJi" class="go-edit-ji edited" v-if="jiText == ''">
              输入一切不想做的，例如:今天不做家务
          </div>
          <div @click="goJi" class="go-edit-ji" v-else>
              {{jiText}}
          </div>
      </div>
      <div class="go-edit-submit" @click="saveJiYi">
        急急如律令，提交生成
      </div>


    </div>
    <div class="slidebar" style="display: block;">
      <div class="goshare">
         <button open-type="share"></button>
      </div>
    </div>
    <view class="canvas-box-mode" @click="closeCanvas" v-show="canvasShow"></view>
      <view class="canvas-box" v-show="canvasShow">
        <canvas :style="{'width': '100%','height': contentHeight + 'px'}" canvas-id="myCanvas"></canvas>
        <div class="go-save-img" @click="saveImage">
          保存图片去分享到朋友圈
        </div>
      </view>
  </div>
</template>

<script>
import store from "@/store";
import { savePicToAlbum } from "@/utils";

export default {
  data () {
    return {
      motto: "Hello World",
      userInfo: {},
      dateInfo: {},
      maskHidden: true,
      contentHeight: 0,
      windowWidth: 0,
      canvasShow: false,
      imagePath:
        "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
      imageTx:
        "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
      imageEwm:
        "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
      sessionId: ""
    };
  },
  computed: {
    jiText () {
      return store.state.jiText;
    },
    yiText () {
      return store.state.yiText;
    }
  },
  components: {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    // return pageShare.shareData;
    // 转发前，直接关闭领取成功的弹窗；
    return {
      title: "定制你的日历",
      desc: "定制你的日历",
      path: "/pages/index/main",
      imageUrl: "",
      success: function (res) {
        console.log("转发成功");
      },
      fail: function (res) {
        console.log("转发失败");
      }
    };
  },
  onLoad: function () {
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.windowWidth);
        that.windowWidth = res.windowWidth;
        console.log(that.windowWidth);
      }
    });
    this.getUserInfo();
    this.getDateInfo();
    this.getSessionId();
  },
  onUserCaptureScreen: function (res) {
    console.log("用户截屏了");
    console.log(res);
  },

  methods: {
    bindViewTap () {
      const url = "../logs/main";
      wx.redirectTo({ url });
    },
    goYi () {
      const url = "/pages/yi/main?yiText=" + this.yiText;
      // wx.redirectTo({ url });
      wx.navigateTo({ url });
    },
    goJi () {
      const url = "/pages/ji/main?jiText=" + this.jiText;
      // wx.redirectTo({ url });
      wx.navigateTo({ url });
    },
    getUserInfo () {
      // 调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: res => {
              this.userInfo = res.userInfo;
            }
          });
        }
      });
    },
    getDateInfo () {
      wx.request({
        url: "https://www.jialiang.ren/almanac/now.htm",
        data: {},
        method: "get",
        header: {
          "content-type": "application/json"
        },
        success: res => {
          this.dateInfo = res.data.result;
          console.log(this.dateInfo);
          var nowDate = new Date(this.dateInfo.yangli);
          var chinaDate = this.dateInfo.yinli.split("年");
          var weekChina = ["日", "一", "二", "三", "四", "五", "六"];
          this.dateInfo.year = nowDate.getFullYear();
          this.dateInfo.month = nowDate.getMonth() + 1;
          this.dateInfo.day = nowDate.getDate();
          this.dateInfo.week = weekChina[nowDate.getDay()];
          this.dateInfo.chinaYear = chinaDate[0].replace(/\(|\)/g, "");
          this.dateInfo.chinaDay = chinaDate[1];
        },
        complete: res => {
          // TODO:
        }
      });
      wx.request({
        url: "https://www.jialiang.ren/almanac/showPopularCustomTag.htm",
        data: {},
        method: "get",
        header: {
          "content-type": "application/json"
        },
        success: res => {
          res = res.data;
          store.commit("jiList", res.jiList || []);
          store.commit("yiList", res.yiList || []);
        }
      });
    },
    saveJiYi () {
      wx.request({
        url: "https://www.jialiang.ren/almanac/saveUserCustomTag.htm",
        data: {
          sessionId: this.sessionId,
          ji: this.jiText,
          yi: this.yiText
        },
        method: "post",
        header: {
          "content-type": "application/x-www-form-urlencoded;charset=utf-8"
        },
        success: res => {
          res = res.data;
          // console.log(res);
          if (res <= 0) {
            wx.showToast({
              title: "提交失败",
              icon: "none",
              duration: 2000
            });
          } else {
            // wx.showToast({
            //   title: "提交成功",
            //   icon: "success",
            //   duration: 2000
            // });

            this.createNewImg();
          }
        }
      });
    },
    clickHandle (msg, ev) {
      console.log("clickHandle:", msg, ev);
    },
    getSessionId () {
      let _this = this;
      wx.login({
        success: function (res) {
          wx.request({
            url: "https://www.jialiang.ren/wxAppLogin/wxLogin.htm",
            method: "GET",
            header: {
              "content-type": "application/json"
            },
            data: {
              code: res.code
            },
            success: data => {
              data = data.data && data.data.obj;
              console.log(data);
              _this.sessionId = data.sessionId;
            }
          });
        }
      });
    },
    getData: function () {
      let that = this;

      // let i = 0;
      // let lineNum = 1;
      // let thinkStr = "";
      // let thinkList = [];
      // for (let item of that.dateInfo.year) {
      //   if (item === "\n") {
      //     thinkList.push(thinkStr);
      //     thinkList.push("a");
      //     i = 0;
      //     thinkStr = "";
      //     lineNum += 1;
      //   } else if (i === 19) {
      //     thinkList.push(thinkStr);
      //     i = 1;
      //     thinkStr = item;
      //     lineNum += 1;
      //   } else {
      //     thinkStr += item;
      //     i += 1;
      //   }
      // }
      // thinkList.push(thinkStr);
      // that.thinkList = thinkList;
      that.createNewImg();
    },
    drawSquare: function (ctx, height) {
      ctx.rect(0, 50, this.windowWidth, height);
      ctx.setFillStyle("#f5f6fd");
      ctx.fill();
    },

    drawFont: function (ctx, content, height) {
      ctx.setFontSize(16);
      ctx.setFillStyle("#484a3d");
      ctx.fillText(content, this.data.offset, height);
    },

    drawLine: function (ctx, height) {
      ctx.beginPath();
      ctx.moveTo(this.data.offset, height);
      ctx.lineTo(this.data.windowWidth - this.data.offset, height);
      ctx.stroke("#eee");
      ctx.closePath();
    },

    createNewImg: function () {
      let that = this;
      let ctx = wx.createCanvasContext("myCanvas");
      let contentHeight = sizeNum(1205);
      let cont = this.dateInfo;
      that.drawSquare(ctx, contentHeight);
      that.contentHeight = contentHeight;
      this.canvasShow = true;

      function sizeNum (nuem) {
        return nuem * that.windowWidth * (500 / 750) / 750;
      }
      console.log(that.windowWidth);
      console.log(cont);
      console.log(contentHeight);
      ctx.drawImage(
        "../../static/images/test.jpg",
        0,
        0,
        sizeNum(750),
        sizeNum(1205)
      );
      ctx.setTextAlign("center");
      ctx.setFontSize(sizeNum(42));
      ctx.setFillStyle("#231e1b");
      ctx.fillText(cont.year, sizeNum(370), sizeNum(52), sizeNum(108));
      ctx.setTextAlign("left");
      ctx.setFillStyle("#231e1b");
      ctx.fillRect(sizeNum(348), sizeNum(60), sizeNum(110), sizeNum(28)); // (x,y,w,h)

      ctx.setFontSize(sizeNum(24));
      ctx.setFillStyle("#fff");
      ctx.fillText(cont.chinaDay, sizeNum(353), sizeNum(85), sizeNum(107));

      ctx.setFontSize(sizeNum(24));
      ctx.setFillStyle("#231e1b");
      ctx.fillText("农历", sizeNum(293), sizeNum(85), sizeNum(107));

      ctx.setTextAlign("center");
      ctx.font =
        '"PingFang SC", "Heiti SC", "SF UI Text", "Helvetica Neue", Roboto, "Droid Sans Fallback", arial, sans -serif';
      ctx.setFontSize(sizeNum(300));
      ctx.setFillStyle("#e5a900");
      ctx.shadowOffsetX = sizeNum(0); // 阴影Y轴偏移
      ctx.shadowOffsetY = sizeNum(0); // 阴影X轴偏移
      ctx.shadowBlur = sizeNum(15); // 模糊尺寸
      ctx.shadowColor = "rgba(51, 51, 51, 0.5)"; // 颜色
      ctx.fillText(cont.day, sizeNum(375), sizeNum(356));

      ctx.setTextAlign("left");
      ctx.shadowOffsetX = 0; // 阴影Y轴偏移
      ctx.shadowOffsetY = 0; // 阴影X轴偏移
      ctx.shadowBlur = 0; // 模糊尺寸
      ctx.setFontSize(sizeNum(28));
      ctx.setFillStyle("#231e1b");

      var wxYear = cont.chinaYear + "年";
      for (var i = 0; i < wxYear.length; i++) {
        console.log(wxYear.substr(i, 1));
        ctx.fillText(wxYear.substr(i, 1), sizeNum(82), sizeNum(178 + i * 32));
      }

      var wxmonth = cont.monthGz + "月" + cont.dayGz + "日";
      for (var j = 0; j < wxmonth.length; j++) {
        ctx.fillText(wxmonth.substr(j, 1), sizeNum(637), sizeNum(178 + j * 32));
      }

      ctx.setTextAlign("center");
      ctx.setFontSize(sizeNum(34));
      ctx.setFillStyle("#231e1b");
      ctx.fillText(
        cont.month + "月" + cont.monthSize,
        sizeNum(148),
        sizeNum(462)
      );
      ctx.fillText("星期" + cont.week, sizeNum(598), sizeNum(462));

      ctx.setFontSize(sizeNum(18));
      ctx.setFillStyle("#fff");
      ctx.fillText(cont.monthEn, sizeNum(148), sizeNum(422));
      ctx.fillText(cont.zhouJiEn, sizeNum(598), sizeNum(422));

      ctx.setFontSize(sizeNum(28));
      ctx.setFillStyle("#231e1b");
      ctx.setTextAlign("center");
      ctx.fillText(
        this.yiText,
        sizeNum(470),
        sizeNum(595),
        sizeNum(456),
        sizeNum(45)
      );

      ctx.setFontSize(sizeNum(28));
      ctx.setFillStyle("#231e1b");
      ctx.fillText(
        this.jiText,
        sizeNum(470),
        sizeNum(796),
        sizeNum(456),
        sizeNum(45)
      );

      ctx.setFontSize(sizeNum(30));
      ctx.setFillStyle("#c08900");
      ctx.setTextAlign("left");
      ctx.fillText(
        "好看的人，说什么都准～",
        sizeNum(100),
        sizeNum(1006),
        sizeNum(456),
        sizeNum(45)
      );
      ctx.fillText(
        "不信试试？",
        sizeNum(100),
        sizeNum(1050),
        sizeNum(456),
        sizeNum(45)
      );

      ctx.drawImage(
        "../../static/images/qcode_600.png",
        sizeNum(500),
        sizeNum(940),
        sizeNum(180),
        sizeNum(180)
      );

      ctx.draw();
      // this.savePic();
    },

    saveImage: function () {
      let that = this;
      // setTimeout(function () {
      wx.showLoading({
        title: "保存图片中...",
        mask: true
      });
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.windowWidth,
        height: that.contentHeight,
        canvasId: "myCanvas",
        success: function (res) {
          savePicToAlbum(res.tempFilePath, that);
        },
        fail: function () {
          wx.hideLoading();
          wx.showToast({
            title: "保存失败",
            icon: "none",
            duration: 2000
          });
        }
      });
      // }, 400);
    },
    closeCanvas: function () {
      this.canvasShow = false;
    }
  },
  created () {
    // 调用应用实例的方法获取全局数据
  }
};
</script>

<style scoped>
page {
  height: 100%;
}
.canvas-cont {
  width: 750rpx;
  height: 940rpx;
}
.container-box {
  background: url("https://jialiang.ren/images/page-bg1.jpg") no-repeat;
  background-size: 100% auto;
  padding-top: 10rpx;
  padding-bottom: 140rpx;
}
.container-index {
  min-height: 100%;
  background: url("https://jialiang.ren/images/page-bg2.jpg") repeat-y;
  background-size: 100% auto;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, "\5B8B\4F53", sans-serif;
}
.index-header {
  width: 709rpx;
  height: 119rpx;
  background: url("https://jialiang.ren/images/title-bg.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}
.index-header-date {
  float: left;
  width: 255rpx;
  font-size: 0;
  text-align: center;
  padding-top: 10rpx;
  letter-spacing: 4rpx;
}
.index-header-date .date-h-year {
  font-size: 42rpx;
  color: #231e1b;
  text-align: center;
  height: 49rpx;
  line-height: 49rpx;
  padding-top: 3rpx;
}
.index-header-date span {
  font-size: 24rpx;
  line-height: 26rpx;
  height: 26rpx;
  display: inline-block;
  margin: 0 5rpx;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* .canvas-box {
  position: fixed;
  top: 999999rpx;
  left: 0;
} */
.index-header-date span.date-h-day {
  color: #fff;
  background-color: #2e2e2e;
  text-align: center;
  padding: 0 8rpx;
  border-radius: 5rpx;
}
.index-content {
  width: 709rpx;
  height: 400rpx;
  margin: 0 auto 10rpx auto;
}
.index-content-txt {
  float: left;
  width: 36rpx;
  padding-top: 37rpx;
  height: 255rpx;
  word-wrap: break-word;
  font-size: 28rpx;
  margin: 0 58rpx;
  color: #231e1b;
  position: relative;
  padding-left: 8rpx;
}
.top-star {
  width: 20rpx;
  height: 20rpx;
  background: url("https://jialiang.ren/images/icon-tq.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 12rpx;
  top: 8rpx;
}
.icon-sx {
  width: 44rpx;
  height: 47rpx;
  background: url("https://jialiang.ren/images/icon-dog.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0rpx;
  bottom: 25rpx;
}
.bottom-star {
  width: 20rpx;
  height: 20rpx;
  background: url("https://jialiang.ren/images/icon-tq.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 12rpx;
  bottom: 0rpx;
}
.index-content-date {
  float: left;
  width: 389rpx;
  height: 302rpx;
  line-height: 302rpx;
  font-size: 320rpx;
  color: #e5a900;
  text-align: center;
  font-weight: 600;
  text-shadow: #999 0rpx 0rpx 20rpx;
}
.index-content-sebtember,
.index-content-friday {
  width: 160rpx;
  height: 65rpx;
  position: absolute;
}
.index-content-sebtember {
  left: 50rpx;
  top: 37rpx;
}
.index-content-friday {
  right: 49rpx;
  top: 37rpx;
}
.friday-title {
  width: 160rpx;
  height: 24rpx;
  font-size: 18rpx;
  color: #fff;
  text-align: center;
  letter-spacing: 5rpx;
}
.friday-cont {
  height: 40rpx;
  line-height: 40rpx;
  font-size: 34rpx;
  text-align: center;
  color: #231e1b;
  letter-spacing: 8rpx;
}
.go-edit-yi,
.go-edit-ji {
  width: 427rpx;
  height: 58rpx;
  line-height: 58rpx;
  position: absolute;
  left: 237rpx;
  background-color: #fff;
  border-radius: 10rpx;
  padding: 0 10rpx;
  font-size: 26rpx;
  color: #231e1b;
  text-align: center;
  overflow: hidden;
}
.go-edit-yi {
  top: 82rpx;
}
.go-edit-ji {
  top: 282rpx;
}
.go-edit-yi.edited,
.go-edit-ji.edited {
  color: rgba(178, 178, 178, 1);
  text-align: center;
}

.slidebar {
  position: fixed;
  width: 68rpx;
  bottom: 28rpx;
  right: 28rpx;
  z-index: 13;
}

.slidebar .goshare {
  height: 67rpx;
  width: 68rpx;
  display: block;
  position: relative;
  background: url("https://jialiang.ren/images/share.png") no-repeat transparent;
  background-size: 100% 100%;
  border: 0;
}

.slidebar .goshare button {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.index-content-footer {
  width: 709rpx;
  height: 98rpx;
  position: relative;
  clear: both;
  background: url("https://jialiang.ren/images/content-dh.png") no-repeat;
  background-size: 100% 100%;
}
.go-edit-cont {
  width: 711rpx;
  height: 419rpx;
  background: url("https://jialiang.ren/images/content-bg.png") no-repeat;
  background-size: 100% 100%;
  margin: 0 auto 60rpx auto;
  position: relative;
}
.go-edit-submit {
  width: 690rpx;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #e5a900;
  color: #fff;
  font-size: 36rpx;
  margin: 0 auto;
  text-align: center;
  border-radius: 8rpx;
}
.index-header-txt {
  height: 119rpx;
  line-height: 105rpx;
  width: 226rpx;
  font-size: 30rpx;
  text-align: center;
  color: #231e1b;
  float: left;
  letter-spacing: 8rpx;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 150px;
}

.form-control {
  display: block;
  padding: 0 12px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
}

.counter {
  display: inline-block;
  margin: 10px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}

.edit-footer {
  height: 60px;
  margin-top: 20px;
  padding-left: 40rpx;
  padding-right: 40rpx;
  background-color: back;
  display: flex;
  align-items: center;
}
.canvas-box-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* background-color: turquoise; */
  background-color: #333;
  opacity: 0.9;
  z-index: 14;
}
.canvas-box {
  width: 500rpx;
  position: fixed;
  top: 100rpx;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  margin: 0 auto;
  z-index: 14;
}
.canvas-box canvas {
  border: 1px solid #231e1b;
  border-radius: 8rpx;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: #333 0rpx 0rpx 30rpx;
}

.go-save-img {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #e5a900;
  color: #fff;
  font-size: 36rpx;
  margin: 0 auto;
  text-align: center;
  margin-top: 40rpx;
  border-radius: 8rpx;
}

.button-done {
  width: 100%;
  border-radius: 50rpx !important;
  /*background: linear-gradient(to right, red , blue);*/
}
</style>
